<template>
  <div
    id="srv_state"
    class="echarts"
  ></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, onUnmounted, ref, watch } from 'vue'

interface Props {
  metricsData: {
    vea_server_state_cpu_load: Array<{ value: string }>
    vea_server_state_mem_usage: Array<{ value: string }>
  } | null
}

const props = defineProps<Props>()

const chartDom = ref<HTMLElement | null>(null)
const myChart = ref<echarts.ECharts | null>(null)

// 数据存储
const timeList = ref<string[]>([])
const cpuData = ref<number[]>([])
const memoryData = ref<number[]>([])

// 图表配置
const getChartOption = () => {
  return {
    title: {
      text: '服务器资源',
      left: 'center'
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: function (params: { name: string; seriesName: string; value: number }) {
        return `${params.name}<br/>${params.seriesName}: ${params.value.toFixed(2)}%`
      }
    },
    legend: {
      data: ['CPU使用率', '内存使用率'],
      top: 30
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: timeList.value
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: 'CPU使用率',
        type: 'line',
        smooth: true,
        data: cpuData.value,
        itemStyle: {
          color: '#5470c6'
        }
      },
      {
        name: '内存使用率',
        type: 'line',
        smooth: true,
        data: memoryData.value,
        itemStyle: {
          color: '#91cc75'
        }
      }
    ]
  }
}

// 更新数据
const updateData = () => {
  if (!props.metricsData) return

  const now = new Date()
  const currentTime = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })

  // 维护最近60个数据点
  if (timeList.value.length >= 60) {
    timeList.value.shift()
    cpuData.value.shift()
    memoryData.value.shift()
  }

  // 添加新数据
  timeList.value.push(currentTime)
  cpuData.value.push(Number(props.metricsData.vea_server_state_cpu_load[0].value))
  memoryData.value.push(Number(props.metricsData.vea_server_state_mem_usage[0].value))

  // 更新图表
  myChart.value?.setOption(getChartOption())
}

// 监听数据变化
watch(() => props.metricsData, () => {
  updateData()
}, { deep: true })

// 初始化图表
const initChart = () => {
  if (!chartDom.value) return

  myChart.value = echarts.init(chartDom.value)
  myChart.value.setOption(getChartOption())

  // 添加窗口大小变化的监听
  window.addEventListener('resize', () => {
    myChart.value?.resize()
  })
}

onMounted(() => {
  chartDom.value = document.getElementById('srv_state')
  initChart()
  if (props.metricsData) {
    updateData()
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', () => {
    myChart.value?.resize()
  })
  myChart.value?.dispose()
})
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 320px;
}
</style>
